import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Form, Input, message } from 'antd';
import JSEncrypt from 'jsencrypt';
import api from '@/api/login';
import './index.scss';
import EyeTwoTone from '@/assets/images/EyeTwoTone.png';
import EyeInvisibleOutlined from '@/assets/images/EyeInvisibleOutlined.png';
import { useAppDispatch } from '@/store/hooks';
import { setEmail, setPassword } from '@/store/userinfoSlice';
interface loginData {
    userName: string;
    password: string;
}
const Login = (props: any) => {
    const encryptPassword = new JSEncrypt();
    const [loginForm] = Form.useForm<loginData>();
    const userName = Form.useWatch('userName', loginForm);
    const password = Form.useWatch('password', loginForm);
    const navigate = useNavigate();
    const [loading, setLoading] = useState(false);
    const dispatch = useAppDispatch();
    const login = async (prop: loginData) => {
        api.login(prop, res => {
            if (res.code === 200) {
                dispatch(setPassword(password));
                dispatch(setEmail(userName));
                navigate('/dashboard');
            } else {
                message.error(res.message);
            }
            setLoading(false);
        });
    };
    const onFinish = (values: any) => {
        setLoading(true);
        api.getPublicKey(publicKeyRes => {
            if (publicKeyRes.code === 200 && publicKeyRes.data) {
                encryptPassword.setPublicKey(publicKeyRes.data.publicKey);
                const passwordRsa = encryptPassword.encrypt(values.password);
                login({
                    userName: values.userName,
                    password: passwordRsa || '',
                });
            } else {
                message.error(publicKeyRes.message);
                setLoading(false);
            }
        });
    };
    return (
        <div className="login-main">
            <div className="login-container flex-center">
                <img className="logo" src={require('@/assets/images/logo.png')} alt="" />
            </div>
            <div className="login-r-container flex-center">
                <div className="login-r">
                    <div className="login-form">
                        <div className="login-title">Login</div>
                        <Form
                            form={loginForm}
                            name="login-form"
                            layout="vertical"
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            validateTrigger="onBlur"
                            autoComplete="off"
                        >
                            <Form.Item
                                label="User name"
                                name="userName"
                                rules={[
                                    {
                                        required: true,
                                        message: 'Please type your user name',
                                    },
                                ]}
                            >
                                <Input className="default_input" />
                            </Form.Item>

                            <Form.Item
                                label="Password"
                                name="password"
                                rules={[
                                    { required: true, message: 'Please type your password' },
                                    {
                                        min: 6,
                                        max: 15,
                                        message:
                                            'Error signing in. Please check your user name and password and try again.',
                                    },
                                ]}
                            >
                                <Input.Password
                                    className="default_input"
                                    maxLength={15}
                                    iconRender={visible =>
                                        visible ? (
                                            <img
                                                src={EyeTwoTone}
                                                alt=""
                                                style={{ width: 24, height: 24, cursor: 'pointer' }}
                                            />
                                        ) : (
                                            <img
                                                src={EyeInvisibleOutlined}
                                                alt=""
                                                style={{ width: 24, height: 24, cursor: 'pointer' }}
                                            />
                                        )
                                    }
                                />
                            </Form.Item>
                            <Form.Item>
                                <div className="flex-center">
                                    <Button
                                        className="submit-btn"
                                        type="primary"
                                        htmlType="submit"
                                        disabled={!userName || !password}
                                        loading={loading}
                                    >
                                        Login
                                    </Button>
                                </div>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Login;
